<%- include('head') -%>
</head>
<body>
   <div class="layui-container-fluid">
       <!-- 面包屑导航 -->
       <div class="nav">
        <span class="layui-breadcrumb">
            <a href="/main">首页</a>
            <a><cite>分类列表</cite></a>
          </span>
       </div>
       <div class="content">
           <!-- 按钮 -->
           <div class="addBtn" style="margin:10px 0">
            <a href="/cateAdd" class="layui-btn layui-btn-default">增加分类</a>
           </div>
           <div class="lists">
            <table class="layui-table">
              <thead>
                <tr>
                  <th>分类标题</th>
                  <th>分类描述</th>
                  <th>分类图标</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr> 
              </thead>
              <tbody>
               <% for(var i=0;i<cates.length;i++){ %> 
                <tr>
                    <td><%= cates[i].cateName %></td>
                    <td><%= cates[i].cateDesc?cates[i].cateDesc:'暂无描述' %></td>
                    <td>
                        <img width="100" src="<%= cates[i].cateIcon %>" alt="">
                    </td>
                    <td><%= new Date(cates[i].createAt).toLocaleDateString() %></td>
                    <td>
                        <button data-id="<%= cates[i]._id %>" class="toEdit layui-btn layui-btn-warm layui-btn-xs">编辑</button>
                        <button  data-id="<%= cates[i]._id %>" class="layui-btn del layui-btn-danger layui-btn-xs">删除</button>
                    </td>
                </tr>
                <%}%>
                <% if(!cates.length) { %>
                    <tr>
                        <td colspan="5" align="center">暂无数据</td>
                    </tr>
                <% } %>
              </tbody>
            </table>
            <div id="page"></div>
           </div>
       </div>
   </div>
   <%-  include('footer') -%>
   <script>
       layui.use(['element','laypage','jquery','layer'],()=>{
           var element = layui.element;
           var laypage = layui.laypage;
           var $ = layui.jquery;
           var layer = layui.layer;
            // 点击删除
            $('.del').click(function(){
                let id = this.dataset.id;
                layer.confirm('您确认删除吗?', {icon: 3, title:'删除'}, function(index){
                //    发送ajax 传 当前 分类的id
                  $.ajax({
                      url:"/cateDel",
                      type:'POST',
                      dataType:'json',
                      data:{
                          _id:id
                      },
                      success:function(res){
                        console.log(res)
                        if(res.code === 0){
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                history.go(0)
                            });   
                        }
                      }
                  })  
                layer.close(index);
                });
            })

           $(".toEdit").click(function(){
            //    跳转到编辑页
                //alert(this.dataset.id)
               location.href=`/cateEdit?cateId=${this.dataset.id}`;
           })
           laypage.render({
               elem:"page",
               limit:2,
               curr:<%= current %>,
               count:<%= counts %>,
               jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                console.log(first)
                //首次不执行

                if(!first){
                //do something
                    location.href = `/cateList?current=${obj.curr}&pageSize=${obj.limit}`
                }
            }
           });

       })
   </script>
</body>
</html>